<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!-- All Spring messages used in this view are declared below with a variable -->
<spring:message code="customer.change_lbl" var="change_lbl"/>
<spring:message code="customer.genderMale_lbl" var="gendermale_lbl"/>
<spring:message code="customer.choosegender_lbl" var="choosegender_lbl"/>
<spring:message code="customer.gender_lbl" var="gender_lbl"/>
<spring:message code="customer.genderFemale_lbl" var="genderfemale_lbl"/>
<spring:message code="customer.firstname_lbl" var="firstname_lbl"/>
<spring:message code="customer.lastname_lbl" var="lastname_lbl"/>
<spring:message code="customer.birthdate_lbl" var="birthdate_lbl"/>
<spring:message code="customer.address_lbl" var="address_lbl"/>
<spring:message code="customer.streetname_lbl" var="streetname_lbl"/> 
<spring:message code="customer.housenumber_lbl" var="housenumber_lbl"/> 
<spring:message code="customer.postalcode_lbl" var="postalcode_lbl"/>
<spring:message code="customer.postalcodeExample_lbl" var="postalcode_example_lbl"/>
<spring:message code="customer.abode_lbl" var="city_lbl"/>
<spring:message code="customer.country_lbl" var="country_lbl"/>
<spring:message code="customer.emailaddress_lbl" var="emailaddress_lbl"/>
<spring:message code="customer.phonenumber_lbl" var="phonenumber_lbl"/>
<spring:message code="customer.username_lbl" var="username_lbl"/>
<spring:message code="customer.password_lbl" var="password_lbl"/>
<spring:message code="customer.confirmPassword_lbl" var="confirmPassword_lbl"/>
<spring:message code="save_btn" var="save_btn"/>

<!-- Body -->
<div class="col-md-10 col-sm-10 col-centered">
    <div class="panel panel-info  col-centered" >
        <div class="panel-heading" >
            ${change_lbl}
        </div>
        <!--<div class="container-fluid">-->
        <form:form class="form-horizontal" id="loginForm" action="${pageContext.request.contextPath}/customer/edit" method="post" modelAttribute="customerviewmodel">
            <div class="" style="margin-top:10px;">
                <form:errors/>
                <div class="form-group">
                    <form:hidden path="customer.id"/>
                    <label class="col-md-4 col-sm-3 control-label">${gender_lbl}</label>
                    <div class="col-md-3 col-sm-4">
                        <form:select path="customer.gender" class="form-control ">
                            <form:option value="" label="${choosegender_lbl}"/>
                            <form:option value="MALE" label="${gendermale_lbl}"/>
                            <form:option value="FEMALE" label="${genderfemale_lbl}"/>
                        </form:select>
                        <form:errors path="customer.gender" cssClass="error" />
                    </div>
                </div>                   
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${firstname_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input class="form-control" type='text' path='customer.surname' placeholder="${firstname_lbl}"/>                          
                        <form:errors path="customer.surname" cssClass="error" />
                    </div>
                </div>                   
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${lastname_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input class="form-control" type='text' path='customer.lastname' placeholder="${lastname_lbl}"/>
                        <form:errors path="customer.lastname" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${birthdate_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input path="customer.birthdate"  id="test" data-role="datepicker" data-bind="format:dd-MM-yyyy, value: selectedDate, events: {onchange: onchange}"/>
                        <form:errors path="customer.birthdate" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${address_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input class="form-control" type='text' path='customer.streetAddress' placeholder="${streetname_lbl}"/>
                        <form:errors path="customer.streetAddress" cssClass="error" />                      
                    </div>
                    <div class="col-md-2 col-sm-2">
                        <form:input class="form-control" type='text' path='customer.houseNumber' placeholder="${housenumber_lbl}"/>
                        <form:errors path="customer.houseNumber" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label"></label>
                    <div class="col-md-2 col-sm-4">
                        <form:input class="form-control" type='text' path='customer.postalCode' placeholder="${postalcode_example_lbl}"/>
                        <form:errors path="customer.postalCode" cssClass="error" />
                    </div>
                    <div class="col-md-3 col-sm-4">
                        <form:input class="form-control" type='text' path='customer.city' placeholder="${city_lbl}" />
                        <form:errors path="customer.city" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${phonenumber_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input class="form-control" type='text' path='customer.telephone1' placeholder="${phonenumber_lbl}"/>
                        <form:errors path="customer.telephone1" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${emailaddress_lbl}</label>
                    <div class="col-md-3 col-sm-6">
                        <form:input class="form-control" type='text' path='customer.email' placeholder="${emailaddress_lbl}"/>                            
                        <form:errors path="customer.email" cssClass="error" />
                    </div>
                </div>
            </div>
            <hr/>
            <div class="">
                <div class="form-group">
                    <label class="col-md-4 col-sm-3 control-label">${username_lbl}</label>
                    <div class="col-md-4 col-sm-4">
                        <form:input class="form-control disabled" type='text' path='burritoUser.username' disabled="true"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-xs-4 col-centered">
                    <input class="btn" id="submit" name="submit" type="submit" value="${save_btn}"/>
                </div>
            </div>
        </form:form>
    </div>
</div>
<!--</div>-->
<script>
    var viewModel = kendo.observable({
        selectedDate: null,
        onchange: onchange
    });
    kendo.bind($("#test"), viewModel);

    function onchange(e) {
        viewModel.set("selectedDate", e.target.value);
    }
</script>
